<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有趣的博客系统</title>
    <link rel="stylesheet" href="static/css/public.css">
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <header class="clearfix">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-4 col-xs-3"></div>
                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3">
                    <a href="javascript:;" class="login" data-toggle="modal" data-target="#loginModal">登录</a>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3">
                    <a href="javascript:;" data-toggle="modal" data-target="#regModal">注册</a>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 dropdown">
                    <a href="javascript:;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">李狗蛋</a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="personal.html">个人中心</a></li>
                        <li><a href="#">个人设置</a></li>
                        <li><a href="#">我的主页</a></li>
                        <li><a href="#">反馈建议</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">退出</a></li>
                    </ul>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs text-center">
                    <a href="javascript:;">写博客</a>
                </div>
            </div>
        </header>
        <section class="main-content clearfix">
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 main-content-left">
                    <!-- logo图 -->
                    <a href="javascript:;">
                        <img src="static/images/logo.png" alt="logo图" class="img-responsive">
                    </a>
                    <!-- 导航 -->
                    <ul class="nav nav-pills nav-stacked text-center">
                        <li role="presentation" class="active">
                            <a href="javascript:;">首页</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:;">生活琐事</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:;">技术杂谈</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:;">情感家庭</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:;">社会热点</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:;">随心感悟</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 main-content-middle">
                    <!-- 轮播图 -->
                    <div id="carousel-example-generic" class="carousel slide clearfix" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="static/images/img1.jpg" alt="轮播图">
                                <div class="carousel-caption">
                                    第一张轮播图
                                </div>
                            </div>
                            <div class="item">
                                <img src="static/images/img2.jpg" alt="轮播图">
                                <div class="carousel-caption">
                                    第二张轮播图
                                </div>
                            </div>
                            <div class="item">
                                <img src="static/images/img3.jpg" alt="轮播图">
                                <div class="carousel-caption">
                                    第三张轮播图
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <!-- 图文列表 -->
                    <div class="row article-list">
                        <ul class="nav nav-tabs clearfix">
                            <li role="presentation" class="active"><a href="#">推荐</a></li>
                            <li role="presentation"><a href="#">点击量</a></li>
                            <li role="presentation"><a href="#">最新</a></li>
                        </ul>
                        <div>
                            <a href="javascript:;">
                                <img src="static/images/img1.jpg" alt="封面图" class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            </a>
                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                                <a href="javascript:;">我们有趣的博客系统成立啦!我们有趣的博客系统成立啦!我们有趣的博客系统成立啦!</a>
                                <p>
                                    <span>
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span>路人甲</span>
                                    </span>
                                    <span>
                                        <span class="glyphicon glyphicon-time
                                                "></span>
                                        <span>2018-09-02</span>
                                    </span>
                                </p>
                                <div class="zhaiyao">
                                    这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要

                                </div>
                                <div class="other">
                                    <p class="pull-left">
                                        <a href="javascript:;">生活</a>
                                        <a href="javascript:;">技术</a>
                                    </p>
                                    <p class="pull-right">
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            <span>2233</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            <span>76</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span>13</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-heart"></span>
                                            <span>13</span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="javascript:;">
                                <img src="static/images/img1.jpg" alt="封面图" class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            </a>
                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                                <a href="javascript:;">我们有趣的博客系统成立啦!我们有趣的博客系统成立啦!</a>
                                <p>
                                    <span>
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span>路人甲</span>
                                    </span>
                                    <span>
                                        <span class="glyphicon glyphicon-time
                                                    "></span>
                                        <span>2018-09-02</span>
                                    </span>
                                </p>
                                <div class="zhaiyao">
                                    这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要

                                </div>
                                <div class="other">
                                    <p class="pull-left">
                                        <a href="javascript:;">生活</a>
                                        <a href="javascript:;">技术</a>
                                    </p>
                                    <p class="pull-right">
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            <span>2233</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            <span>76</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span>13</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-heart"></span>
                                            <span>13</span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="javascript:;">
                                <img src="static/images/img1.jpg" alt="封面图" class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            </a>
                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                                <a href="javascript:;">我们有趣的博客系统成立啦!</a>
                                <p>
                                    <span>
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span>路人甲</span>
                                    </span>
                                    <span>
                                        <span class="glyphicon glyphicon-time
                                                        "></span>
                                        <span>2018-09-02</span>
                                    </span>
                                </p>
                                <div class="zhaiyao">
                                    这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要

                                </div>
                                <div class="other">
                                    <p class="pull-left">
                                        <a href="javascript:;">生活</a>
                                        <a href="javascript:;">技术</a>
                                    </p>
                                    <p class="pull-right">
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            <span>2233</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            <span>76</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span>13</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-heart"></span>
                                            <span>13</span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="javascript:;">
                                <img src="static/images/img1.jpg" alt="封面图" class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            </a>
                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                                <a href="javascript:;">我们有趣的博客系统成立啦!</a>
                                <p>
                                    <span>
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span>路人甲</span>
                                    </span>
                                    <span>
                                        <span class="glyphicon glyphicon-time
                                                            "></span>
                                        <span>2018-09-02</span>
                                    </span>
                                </p>
                                <div class="zhaiyao">
                                    这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要

                                </div>
                                <div class="other">
                                    <p class="pull-left">
                                        <a href="javascript:;">生活</a>
                                        <a href="javascript:;">技术</a>
                                    </p>
                                    <p class="pull-right">
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            <span>2233</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            <span>76</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span>13</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-heart"></span>
                                            <span>13</span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="javascript:;">
                                <img src="static/images/img1.jpg" alt="封面图" class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            </a>
                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                                <a href="javascript:;">我们有趣的博客系统成立啦!</a>
                                <p>
                                    <span>
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span>路人甲</span>
                                    </span>
                                    <span>
                                        <span class="glyphicon glyphicon-time
                                                                "></span>
                                        <span>2018-09-02</span>
                                    </span>
                                </p>
                                <div class="zhaiyao">
                                    这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要

                                </div>
                                <div class="other">
                                    <p class="pull-left">
                                        <a href="javascript:;">生活</a>
                                        <a href="javascript:;">技术</a>
                                    </p>
                                    <p class="pull-right">
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            <span>2233</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            <span>76</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span>13</span>
                                        </a>
                                        <a href="javascript:;">
                                            <span class="glyphicon glyphicon-heart"></span>
                                            <span>13</span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 分页 -->
                        <nav aria-label="Page navigation" class="text-center">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 main-content-right">
                    <!-- 每日公告 -->
                    <div class="board">
                        <span class="label label-info">每日公告</span>
                        <p>今天有什么新鲜的事情呢？今天有什么新鲜的事情呢？今天有什么新鲜的事情呢？今天有什么新鲜的事情呢？今天有什么新鲜的事情呢？</p>
                    </div>
                    <!-- 搜索框 -->
                    <div class="search clearfix">
                        <input type="text" placeholder="请输入关键词..." class="col-lg-10 col-md-10 col-sm-9 col-xs-9">
                        <button type="button" class="btn btn-info col-lg-2 col-md-2 col-sm-3 col-xs-3">搜索</button>
                    </div>
                    <!-- 热门推荐 -->
                    <div class="recommend">
                        <span class="label label-info">热门推荐</span>
                        <div class="clearfix row">
                            <div class="col-lg-9 col-md-9 col-sm-12">
                                <p>
                                    <a href="javascript:;">这是标题表标题标题啊这是标题表标题标题啊</a>
                                </p>
                                <p>
                                    <span class="pull-left">
                                        <a href="javascript:;">韩事宜</a>
                                    </span>
                                    <span class="pull-right">2018-09-02</span>
                                </p>
                            </div>
                            <a href="javascript:;" class="col-lg-3 col-md-3 hidden-sm hidden-xs">
                                <img src="static/images/img1.jpg" alt="封面缩略图" class="img-responsive">
                            </a>
                        </div>
                        <div class="clearfix row">
                            <div class="col-lg-9 col-md-9 col-sm-12">
                                <p>
                                    <a href="javascript:;">这是标题表标题标题啊这是标题表标题标题啊</a>
                                </p>
                                <p>
                                    <span class="pull-left">
                                        <a href="javascript:;">韩事宜</a>
                                    </span>
                                    <span class="pull-right">2018-09-02</span>
                                </p>
                            </div>
                            <a href="javascript:;" class="col-lg-3 col-md-3 hidden-sm hidden-xs">
                                <img src="static/images/img1.jpg" alt="封面缩略图" class="img-responsive">
                            </a>
                        </div>
                        <div class="clearfix row">
                            <div class="col-lg-9 col-md-9 col-sm-12">
                                <p>
                                    <a href="javascript:;">这是标题表标题标题啊这是标题表标题标题啊</a>
                                </p>
                                <p>
                                    <span class="pull-left">
                                        <a href="javascript:;">韩事宜</a>
                                    </span>
                                    <span class="pull-right">2018-09-02</span>
                                </p>
                            </div>
                            <a href="javascript:;" class="col-lg-3 col-md-3 hidden-sm hidden-xs">
                                <img src="static/images/img1.jpg" alt="封面缩略图" class="img-responsive">
                            </a>
                        </div>
                    </div>
                    <div class="comments clearfix hidden-sm hidden-xs">
                        <span class="label label-info">最新评论</span>
                        <ul>
                            <li class="clearfix row">
                                <a href="javascript:;" class="col-lg-3 col-md-3">
                                    <img src="static/images/img1.jpg" alt="用户头像" class="img-responsive img-circle">
                                </a>
                                <div class="col-lg-9 col-md-9">
                                    <p>你电话(2018-09-02)说:</p>
                                    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                </div>
                            </li>
                            <li class="clearfix row">
                                <a href="javascript:;" class="col-lg-3 col-md-3">
                                    <img src="static/images/img1.jpg" alt="用户头像" class="img-responsive img-circle">
                                </a>
                                <div class="col-lg-9 col-md-9">
                                    <p>你电话(2018-09-02)说:</p>
                                    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                </div>
                            </li>
                            <li class="clearfix row">
                                <a href="javascript:;" class="col-lg-3 col-md-3">
                                    <img src="static/images/img1.jpg" alt="用户头像" class="img-responsive img-circle">
                                </a>
                                <div class="col-lg-9 col-md-9">
                                    <p>你电话(2018-09-02)说:</p>
                                    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tip-cloud clearfix">
                        <span class="label label-info">标签云</span>
                        <div>
                            <a href="javascript:;">技术</a>
                            <a href="javascript:;">技术wew</a>
                            <a href="javascript:;">技术cxc</a>
                            <a href="javascript:;">技术ewew</a>
                            <a href="javascript:;">技术we</a>
                            <a href="javascript:;">技wewe术</a>
                            <a href="javascript:;">技术wewe</a>
                            <a href="javascript:;">技术wewe</a>
                            <a href="javascript:;">dwewe技术</a>
                            <a href="javascript:;">技sdsd术</a>
                            <a href="javascript:;">技cxx术</a>
                        </div>
                    </div>
                    <div class="friendly-links clearfix">
                        <span class="label label-info">友情链接</span>
                        <div>
                            <a href="javascript:;">百度</a>
                            <a href="javascript:;">天猫</a>
                            <a href="javascript:;">淘宝</a>
                            <a href="javascript:;">爱奇艺</a>
                            <a href="javascript:;">优酷</a>
                            <a href="javascript:;">博客园</a>
                            <a href="javascript:;">简书</a>
                            <a href="javascript:;">时空胶囊</a>
                            <a href="javascript:;">一封家书</a>
                            <a href="javascript:;">杨小青的小小小博客</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="clearfix">
            <div class="about-us text-center">
                <h3>关于我们</h3>
                <div>
                    科学人”是果壳网旗下的原创内容团队，拥有网站和公众号两个形态。我们致力于促进公众与科学之间的相互了解，帮助科学在社会议题中担当起应有的角色。

                    在过去的5年里，我们履践“一切新闻都是科技新闻”的理念，塑造了鲜明的媒体形象；我们通过采访研究者本人来开展科研报道，向全球科研工作者发出约稿信，构筑“自己研究自己写”的科学传播模式；我们针对公众关心的科学热点，推出了许多具有社会影响力的内容专题；我们一手打造了诺贝尔奖、搞笑诺贝尔奖的网络直播和解读活动；我们与《Nature》、《Science》、《中国科学》这样级别的国际期刊，与中国科学院、中国科协以及国内众多高校展开了深入的合作；我们采访了一系列国际顶尖的科学家、科学传播明星和学术期刊主编，不断创造和树立行业标杆。

                    现在“科学人”致力于更深入地与科学家对话，致力于更快更准确地将科研成果传递出去，汇聚更多更优秀的科学写作者以及更精美的科学内容视觉呈现。我们希望，让信息在公众和科学家之间充分流动起来，用信息的流动冲决盲从与封闭。
                </div>
            </div>
            <div class="contact-us text-center">
                <h3>联系我们</h3>
                <div>
                    <p>QQ:<span>903618678</span></p>
                    <p>微信:<span>13671123174</span></p>
                    <p>邮箱:<span>903618678@qq.com</span></p>
                    <p>期待与我们联系~</p>
                </div>
            </div>
            <div class="join-us text-center">
                <h3>加入我们</h3>
                <form action="#" class="myForm form-horizontal">
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputName" placeholder="Name...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputEmail3" placeholder="Email...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputTel" class="col-sm-2 control-label">手机号码</label>
                        <div class="col-sm-10">
                            <input type="tel" class="form-control" id="inputTel" placeholder="telephone-number...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="say" class="col-sm-2 control-label">留言</label>
                        <div class="col-sm-10">
                            <textarea name="" id="say" class="form-control" rows="5" placeholder="请留言..."></textarea>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-sm-10 col-lg-10 col-md-10 col-xs-12">
                            <button type="submit" id="submit" class="btn btn-default">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="footer-bottom text-center">
                <p>有趣的博客系统. 冀ICP备17005231号</p>
            </div>
        </footer>
    </div>
    <!-- 注册 -->
    <div class="modal fade" id="regModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close reg-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="regModalLabel">注册</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="regForm">
                        <div class="form-group">
                            <label for="nickName">你的名字</label>
                            <input type="text" class="form-control" id="nickName" placeholder="请输入真实姓名或者常用昵称">
                            <span>此选项为必填项</span>
                        </div>
                        <div class="form-group">
                            <label for="password1">密码</label>
                            <input type="password" class="form-control" id="password1" placeholder="数字字母组合,不少于6位">
                            <span>此选项为必填项</span>
                        </div>
                        <div class="form-group">
                            <label for="password2">确认密码</label>
                            <input type="password" class="form-control" id="password2" placeholder="请与第一次输入的密码保持一致">
                            <span>此选项为必填项</span>
                        </div>
                        <div class="form-group">
                            <label for="email">手机号或电子邮箱</label>
                            <input type="email" class="form-control" id="email" placeholder="11位手机号或Email">
                            <span>此选项为必填项</span>
                        </div>
                        <div class="form-group form-reg-yzm clearfix">
                            <label for="yzm-one">验证码</label>
                            <input type="text" class="form-control" id="yzm-one" placeholder="请输入验证码">
                            <img src="static/images/yzm.jpg" alt="验证码">
                            <span class="clear">验证码输入有误，请重新输入</span>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">我已阅读网站的服务条款
                            </label>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-info toggle-to-login">注册</button>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">已有账号登录</button>
                        </div>
                    </form>
                    <div class="loginWays">
                        <p>更多登录方式</p>
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <img src="static/images/vx.png" alt="微信">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="static/images/wb.png" alt="微博">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="static/images/qq.png" alt="QQ">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="regSuccess">
                        <p>
                            <span class="glyphicon glyphicon-ok"></span>
                            <span>恭喜您！注册成功！</span>
                        </p>
                        <p>
                            <span class="djs">5s</span>
                            <span>后跳转到登录界面</span>
                        </p>
                        <p>
                            点<a href="javascript:;" class="go-to-login">这里</a>直接跳转
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录 -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="loginModalLabel">登录</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="loginForm loginForm-one">
                        <div class="form-group form-tel">
                            <label for="nName">手机号或Email</label>
                            <input type="text" class="form-control" id="nName" placeholder="11位手机号或Email">
                            <span>此选项不能为空</span>
                        </div>
                        <div class="form-group clearfix form-password">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                            <span class="pull-left">此选项不能为空</span>
                            <a href="javascript:;" class="pull-right">忘记密码?</a>
                        </div>
                        <div class="form-group form-way form-way-yzm">
                            <a href="javascript:;">手机验证码登录</a>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">登录</button>
                        </div>
                    </form>
                    <form action="" class="loginForm loginForm-two" style="display:none">
                        <div class="form-group form-tel">
                            <label for="tel">手机号</label>
                            <input type="tel" class="form-control" id="tel" placeholder="请输入11位手机号">
                            <span>此选项不能为空</span>
                        </div>
                        <div class="form-group clearfix form-yzm">
                            <label for="yzm-two">验证码</label>
                            <input type="number" class="form-control" id="yzm-two" placeholder="请输入验证码">
                            <button type="submit" class="btn btn-default">获取验证码</button>
                            <span class="pull-left">此选项不能为空</span>
                        </div>
                        <div class="form-group form-way form-way-pass">
                            <a href="javascript:;">手机密码登录</a>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">登录</button>
                        </div>
                    </form>
                    <div class="loginWays">
                        <p>更多登录方式</p>
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <img src="static/images/vx.png" alt="微信">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="static/images/wb.png" alt="微博">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="static/images/qq.png" alt="QQ">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="static/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('.form-way-yzm>a').on('click', function () {
                $('.loginForm-one').hide();
                $('.loginForm-two').show();
            })
            $('.form-way-pass>a').on('click', function () {
                $('.loginForm-one').show();
                $('.loginForm-two').hide();
            })

            $('.toggle-to-login').click(function () {
                $('.regForm').hide();
                $('.loginWays').hide();
                $('.regSuccess').show();
                
                var jsq=setInterval(function(){
                    var time=parseInt($('.djs').text());
                   
                    if(time===0){
                        clearInterval(jsq);
                        $('#regModal').hide();
                        $('.login').click();
                    }
                    time--;
                    $('.djs').html(time+'s');
                },1000)
            })
        })
    </script>
</body>

</html>